<template>
 <div class="leftbox" >
     <ul>
         <router-link :id="item.cateid" tag="li" :key="index" v-for="(item,index) in goodsList" :to="getPath(item)" active-class="on" @click.native="changeList($event)" >{{item.name}}</router-link>
     </ul>
 </div>
</template>
 
<script>
export default {
    data() {
        return {
            goodsList:[]
        }
    },
    methods:{
        getPath(item) {
            return '/home/classify/tab1/' + item.cateid;
        },
        changeList(e) {
            //获取第一次请求是右边栏信息
            this.$http.get({
                url: '/goods/category/main.html',
                params:{
                do: "getChildren",
                    owner: this.$router.history.current.params.id-0,
                    pet_type: "cat",
                    issite: true,
                    version: 358,
                    system: "wap",
                    isWeb: 1,
                    distinct_id: "17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7",
                    _: "160896647692"

                }
            }).then(res=>{
                this.$emit('getdata',res.cate_list)
            })
        }
    },
    async mounted() {
         //请求获取边栏信息
        let result = await this.$http.get({
            url: '/goods/category/main.html',
            params:{
                pet_type:'cat',
                version:'358',
                system:'wap',
                isWeb:1,
                distinct_id:'17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7',
                _:1608966476675

            }
          })
        this.goodsList = result.categorys
    }
}
</script>
 
<style scoped lang = "stylus">
.leftbox
    width .75rem
    height 6.2rem
    overflow-y scroll
    padding-bottom 50px
    border-right 5px solid #f3f4f5
    li.on
        background: #f3f4f5;
        color: #41C856;
    li
        width .7rem
        padding 15px 0
        font-size .13rem
        text-align center
        text-overflow ellipsis
        white-space nowrap
        border-bottom 1px solid #f3f4f5
</style>